import React, { useEffect, useCallback } from 'react'
import $axios from '@/plugins/request'
import { withRouter } from 'react-router';
import ReactDOM from 'react-router-dom'
import PropTypes from "prop-types";
import {
  Form,
  Input,
  Button,
  Select,
  message,
  Space
} from 'antd';
const { Option } = Select

function UserForm(props) {
  const [form] = Form.useForm()
  let isEdit = !!props?.data;

  useEffect(()=>{
    if (isEdit) form.setFieldsValue(props.data)
  })

  const onFinish = useCallback(async ({ _id, ...values }) => {
    try {
      const { data: res } = isEdit ? await $axios.put(`/api/users/${_id}`, values) : await $axios.post(`/api/users/0`, values)
      if (res.code !== 1) return message.warning(res.msg);
      message.success(res.msg);
    } catch (err) {
      message.error(err.message);
    }
  },[])

  return (
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 6 }}
      layout="horizontal"
      form={form}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item label="用户ID" name="_id" hidden>
        <Input autoComplete="off" />
      </Form.Item>
      <Form.Item label="用户名" name="username">
        <Input disabled={isEdit} readOnly={isEdit} autoComplete="off" />
      </Form.Item>
      <Form.Item label="姓名" name="realname">
        <Input autoComplete="off" />
      </Form.Item>
      <Form.Item label="用户密码" name="password">
        <Input.Password autoComplete="off" />
      </Form.Item>
      <Form.Item label="邮箱" name="email">
        <Input autoComplete="off" />
      </Form.Item>
      <Form.Item label="手机号" name="tel">
        <Input autoComplete="off" />
      </Form.Item>
      <Form.Item label="用户状态" name="state" initialValue={false}>
        <Select style={{ width: 120 }} >
          <Option value={false}>禁用</Option>
          <Option value={true}>启用</Option>
        </Select >
      </Form.Item >
      <Form.Item label="用户角色" name="role" initialValue="用户">
        <Select style={{ width: 120 }} >
          <Option value="管理员">管理员</Option>
          <Option value="用户">用户</Option>
        </Select >
      </Form.Item >
      <Form.Item wrapperCol={{ offset: 4 }}>
        <Space>
          <Button onClick={() => { props.history.goBack() }}>返回</Button>
          <Button type="primary" htmlType="submit">提交</Button>
        </Space>
      </Form.Item>
    </Form >
  )
}

// props数据类型校验 https://www.cnblogs.com/huangqiming/p/10238196.html
UserForm.propTypes = {
  // 指定的多个对象类型中的一个
  // data: PropTypes.oneOfType([
  //   PropTypes.object,
  //   PropTypes.string,
  // ]),
  // data: PropTypes.object,
  // // 定义data对象的属性类型
  // data: PropTypes.shape({
  //   // user_id: PropTypes.number,
  //   // user_name: PropTypes.string.isRequired
  // })
}
// props默认值
UserForm.defaultProps = {
  // data: {
  //   remark: 2
  // }
}
//用到props.goBack()返回,包装一下
export default withRouter(UserForm)